<template>
    <el-form :inline="true">
      <el-form-item v-for="item in queryConfig" :label="item.title"  :size="size">
        <vxe-input v-if="item.type == 'input'" v-model="item.value" :placeholder="item.placeholder" :size="size"
          clearable />
        <vxe-select v-if="item.type == 'select'" v-model="item.value" :placeholder="item.placeholder" :size="size"
          clearable>
          <vxe-option v-for="option in item.options" :value="option.value" :label="option.label" :key="option.value"/>
        </vxe-select>
        <vxe-date-picker v-if="item.type == 'daterange'" v-model="item.date1" :placeholder="item.placeholder1"
          :size="size" clearable />
        <vxe-date-picker v-if="item.type == 'daterange'" v-model="item.date2" :placeholder="item.placeholder2"
          :size="size" clearable style="margin-left: 10px;" />
        <vxe-radio-group v-if="item.type == 'radio'" v-model="item.value" :size="size">
          <vxe-radio-button v-for="option in item.options" :label="option.value" :content="option.label" :key="option.value"/>
        </vxe-radio-group>
        <vxe-checkbox-group v-if="item.type == 'checkbox'" v-model="item.value" :placeholder="item.placeholder" :size="size">
          <vxe-checkbox v-for="option in item.chkoptions" :label="option.label" :content="option.content"></vxe-checkbox>          
        </vxe-checkbox-group>
         <vxe-date-picker v-if="item.type == 'datemonth'" v-model="item.value" type="month"></vxe-date-picker>
      </el-form-item>
      <el-form-item>
        <vxe-button status="success" @click="handleSubmit" :size="size">查询</vxe-button>
      </el-form-item>
    </el-form>
</template>
<script>

import PageConfig from '@/utils/pageConfig';
import XEUtils from 'xe-utils';
import { VxeUI } from 'vxe-pc-ui'

export default {
  name: 'Query',
  props: ['queryConfig'],
  data() {
    return {
      size: PageConfig.ComponentSize,
    }
  },
  computed: {

  },
  created() {

  },
  methods: {
    handleSubmit() {
      let queryParams = [];
      for (let index in this.$props.queryConfig) {
        let item = this.$props.queryConfig[index];

        if (!item.value) {
          if (item.type != 'daterange') {
            continue;
          } else {
            if(item.date1 && !item.date2) {
              VxeUI.modal.message({
                title: '消息提示',
                content: '请选择结束时间后开始查询',
                status: 'warning'
              })
            }else if (!item.date1 && item.date2) {
              VxeUI.modal.message({
                title: '消息提示',
                content: '请选择开始时间后开始查询',
                status: 'warning'
              })
            }else if (!item.date1 && !item.date2) {
              continue;
            }
          }
        }
        if (item.type == 'input') {
          queryParams.push({
            column: item.field,
            content: item.value,
            condition: '6'
          })
        } else if (item.type == 'select') {
          queryParams.push({
            column: item.field,
            content: item.value,
            condition: '0'
          })
        } else if (item.type == 'daterange') {
          queryParams.push({
            column: item.field,
            content: XEUtils.toDateString(item.date1, 'yyyy-MM-dd') + ',' + XEUtils.toDateString(item.date2, 'yyyy-MM-dd'),
            condition: '10'
          })
        } else if (item.type == 'radio') {
          queryParams.push({
            column: item.field,
            content: item.value,
            condition: '0'
          })
        }else if(item.type == 'checkbox'){
          if(item.value && item.value.length > 0){
            queryParams.push({
              column: item.field,
              content: item.value.join(','),
              condition: '9'
            })
          }
        }else if(item.type == 'datemonth'){
          queryParams.push({
            column: item.field,
            content: XEUtils.toDateString(item.value, 'yyyy-MM'),
            condition: '0'
          })
        }
      }

      this.$emit('QueryEvent', queryParams)
    }
  }
}
</script>
<style scoped></style>
